import { createRouter, createWebHashHistory } from 'vue-router'

/**
 * 路由懒加载：
 * 1. 没有懒加载：所有页面代码都会被下载
 * 2. 懒加载：访问小兔鲜儿首页，下载页面js+css等代码并执行
 */
// 1. 导入页面
// 父页面
import Layout from '@/views/layout'
// 子页面：首页
// import Home from '@/views/home'
const Home = () => import('@/views/home')
// 分类页
// import Cate from '@/views/cate'
const Cate = () => import('@/views/cate')
// 商品详情页
const Good = () => import('@/views/good')

// 登录
const Login = () => import('@/views/login')

// 购物车
const Cart = () => import('@/views/cart')

// 创建订单
const Order = () => import('@/views/order')

// 支付
const Pay = () => import('@/views/pay')

// 2. 配置路由
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      // 默认跟随父页面一块渲染显示：1. path地址设置为空 2. path地址和父一样
      // 首页
      {
        path: '/',
        component: Home
      },
      // 分类
      {
        path: '/cate/:id',
        component: Cate
      },
      // 商品详情
      {
        path: '/good/:id',
        component: Good
      },
      // 购物车
      {
        path: '/cart',
        component: Cart
      },
      // 订单
      {
        path: '/order',
        component: Order
      },
      // 支付
      {
        path: '/pay',
        component: Pay
      }
    ]
  },
  {
    path: '/login',
    component: Login
  }
]
// vue2 => new Router()
// vue3 => createRouter()
/**
 * 路由模式修改：
 * vue2 => mode:'hash | history'
 * vue3 => history: createWebHashHistory() | createWebHistory()
 */
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // vue2: scrollBehavior: () => ({ y: 0 }),
  // vue3：每次跳页面把滚动条距离顶部的值，重置为0
  scrollBehavior () {
    return { top: 0 }
  }
})

export default router
